<template>
  <div class="container py-5">
    <div class="row justify-content-center">
      <div class="col-lg-10">
        <!-- 返回按钮 -->
        <div class="mb-4">
          <button @click="goBack" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left me-2"></i>返回列表
          </button>
        </div>

        <!-- 新闻内容 -->
        <article class="news-detail card border-0 shadow">
          <div class="card-body p-4 p-md-5">
            <!-- 日期 -->
            <div class="d-flex align-items-center mb-4">
              <div class="date-box bg-light rounded me-3 text-center">
                <div class="year-month bg-light rounded-top p-2">
                  {{ currentNews.date.yearMonth }}
                </div>
                <div
                  class="day bg-primary text-white rounded-bottom p-3 fs-4 fw-bold"
                >
                  {{ currentNews.date.day }}
                </div>
              </div>
              <h1 class="h2 mb-0">{{ currentNews.title }}</h1>
            </div>

            <!-- 标签 -->
            <div class="mb-4">
              <span
                class="badge bg-secondary me-2"
                v-for="tag in currentNews.tags"
                :key="tag"
                >{{ tag }}</span
              >
            </div>

            <!-- 内容 -->
            <div class="content mt-4">
              <p class="lead">{{ currentNews.summary }}</p>
              <div class="py-3">
                <!-- 这里放新闻正文内容 -->
                <p
                  v-for="(para, index) in newsContent"
                  :key="index"
                  class="mb-3"
                >
                  {{ para }}
                </p>
              </div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

// 模拟获取新闻详情
const currentNews = computed(() => {
  // 实际项目中这里应该通过API获取
  return {
    id: 1,
    date: { yearMonth: "2024-05", day: "15" },
    title: "Vue 3.4 正式发布，性能提升显著",
    summary: 'Vue 3.4 "Slam Dunk" 版本带来多项性能优化和开发者体验改进...',
    tags: ["前端", "Vue"],
    content: "详细内容...",
  };
});

// 模拟新闻正文
const newsContent = computed(() => {
  return [
    'Vue 3.4 "Slam Dunk" 是Vue团队最新推出的版本，该版本在多个方面进行了重大改进。',
    "在性能方面，新版本的模板解析速度提升了约30%，同时减少了内存占用。响应式系统也进行了优化，特别是在处理大型数组时性能提升显著。",
    "开发者体验方面，3.4版本改进了TypeScript支持，提供了更准确的类型推断。同时，单文件组件(SFC)的编译过程也得到了优化，错误提示更加友好。",
    "此外，新版本还引入了几个新的API，包括defineModel的稳定版，以及全新的v-bind同名缩写语法，进一步简化了代码编写。",
  ];
});

const goBack = () => {
  router.go(-1);
};
</script>

<style scoped>
.news-detail {
  border-radius: 12px;
  overflow: hidden;
}

.date-box {
  min-width: 80px;
}

.content {
  line-height: 1.8;
  font-size: 1.1rem;
}

@media (max-width: 768px) {
  .date-box {
    min-width: 70px;
  }

  h1 {
    font-size: 1.5rem;
  }
}
</style>